<template>
  <div class="edit-comp-body common-content">
    <div class="top-search-bar">
      <el-form size="small" ref="queryForm" inline>
        <el-form-item>
          <el-button
              type="primary"
              size="small"
              icon="el-icon-back"
              @click="$router.go(-1)">返回
          </el-button>
          <el-button
              type="primary"
              size="small"
              @click="$router.replace({name:'CompEdit',query:{id:$route.query.id}})">
            组件信息
          </el-button>
          <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="add()">新增函数
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="top">
      <el-table
          class="yt-table ytt-table"
          ref="putTable"
          :data="lists"
          border
          size="mini"
          style="width: 100%">
        <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
        <el-table-column prop="functionName" label="函数名" width="140px" align="center">
        </el-table-column>
        <el-table-column prop="paramInputClass" label="函数入参" min-width="140px" align="center">
          <template slot="header" slot-scope="scope">
            <el-table
                class="yt-table ytt-table ytt-table-hidden-body"
                ref="putTable"
                border
                size="mini"
                style="width: 100%">
              <el-table-column type="index" label="序号" width="50px" align="center"
                               :resizable="false"></el-table-column>
              <el-table-column prop="typeName" label="参数类型" min-width="200px" align="center"
                               :resizable="false"></el-table-column>
              <el-table-column prop="name" label="参数名称" min-width="200px" align="center"
                               :resizable="false"></el-table-column>
            </el-table>
          </template>
          <template slot-scope="scope">
            <el-table
                class="yt-table ytt-table"
                ref="putTable"
                :data="scope.row.paramLists"
                border
                size="mini"
                :show-header="false"
                style="width: 100%">
              <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
              <el-table-column prop="typeName" label="参数类型" min-width="200px" align="center">
                <template slot-scope="scope">
                  <el-select
                      class="w100"
                      size="mini"
                      v-model="scope.row.typeName"
                      placeholder="请选择参数类型"
                      @change="putTypeChange($event,scope.row,scope.$index,scope)">
                    <el-option :label="item.className"
                               :value="item.className"
                               v-for="(item, index) in paramTypeLists"
                               :key="index"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="参数名称" min-width="200px" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" size="mini" placeholder="请填写参数名称"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="paramOutputClass" label="函数出参" min-width="140px" align="center">
        </el-table-column>
        <el-table-column prop="remarks" label="备注" min-width="140px" align="center">
        </el-table-column>
        <el-table-column prop="" label="操作" width="widthpx" header-align="center" align="left">
          <template slot-scope="scope">
            <i class="el-icon-edit table-btn" @click="edi(scope.row)"></i>
            <i class="el-icon-delete table-btn del" @click="del(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Dialog
        :addNewVisible="paramType"
        @closeDia="closeDia"
        width="720px"
        :center="true"
        :title="TitleFlag == 1 ? '新增函数' : '编辑函数'">
      <div slot="body">
        <div class="fncName">
          <span class="cfff">函数名</span>
          <el-input v-model="diaData.functionName" size="small"></el-input>
        </div>
        <p class="iptTile cfff">入参类型</p>
        <div class="tag">
          <span
              class="btnType"
              v-for="(item, index) in paramTypeLists"
              :key="index"
              @click="cliTag(item.className, 1)">{{ item.className }}
            <i class="el-icon-circle-plus-outline"></i>
          </span>
        </div>
        <p class="cfff">已选入参类型：</p>
        <div class="tagContent">
          <div class="btnType"
               v-for="(item, index) in putType"
               :key="index">
            <span class="label-text">{{ item.name }}</span>
            <input class="type-input" v-model="item.value" type="text">
            <i class="el-icon-circle-close" @click="delType(1, index)"></i>
          </div>
        </div>
        <p class="iptTile cfff">出参类型</p>
        <div class="tag">
          <span
              class="btnType"
              v-for="(item, index) in paramTypeLists"
              :key="index"
              @click="cliTag(item.className, 2)">{{ item.className }}
            <i class="el-icon-circle-plus-outline"></i>
          </span>
        </div>
        <p class="cfff">已选出参类型：</p>
        <div class="tagContent">
          <div class="btnType"
               v-for="(item, index) in outType"
               :key="index">
            <span class="label-text">{{ item.name }}</span>
            <input class="type-input" v-model="item.value" type="text">
            <i class="el-icon-circle-close" @click="delType(2, index)"></i>
          </div>
        </div>
        <div class="fncName remark">
          <span class="cfff">备注</span>
          <el-input type="textarea" v-model="diaData.remarks"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="noPut">取 消</el-button>
          <el-button size="small" type="primary" @click="addType">确 定</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog/Dialog.vue";
import Table from "@/components/Table";
import {
  get_getPClass,
  post_updateFunction,
  put_funactonAdd,
  del_deletePFunction
} from "@/apis/assembly/assembly";
import {get_getPlugins} from "@/apis/comList/comList";

export default {
  components: {
    Dialog,
    Table,
  },

  data() {
    return {
      listInfo: [], //获取到的当前组件总信息
      paramType: false, //参数类型弹框
      TitleFlag: "1", //参数类型  1入参  2出参
      paramTypeLists: [], //参数类型
      lists: [], //函数表格数据
      putType: [], //入参类型
      outType: [], //出参类型
      diaData: {functionName: "", remarks: ""}, //弹框数据
      rowId: "", //当前行id
    };
  },
  created() {
    this.getInfo();
    //获取函数类型列表
    this.getType();
  },
  methods: {
    //获取组件函数参数类型
    getType() {
      get_getPClass().then((res) => {
        this.paramTypeLists = res.data.data;
      });
    },
    //获取组件信息
    getInfo() {
      get_getPlugins({pluginsId: this.$route.query.id}).then((res) => {
          let {data} = res.data;
          this.listInfo = data;
          // this.lists = this.listInfo.pfunctionList
          this.lists = this.listInfo.pfunctionList.map((item => {
            return {
              ...item,
              paramLists: item.paramInputClass.split(',').map(param => {
                return {
                  name: param.split(' ')[1],
                  typeName: param.split(' ')[0]
                }
              })
            }
          }))

          console.log(this.lists)
        }
      );
    },
    //新增函数
    add() {
      this.TitleFlag = 1;
      this.paramType = true;
      // this.$router.push({name: 'AddFun', query: {id: this.$route.query.id}})
    },
    //编辑函数
    edi(row) {
      this.TitleFlag = 2;
      this.paramType = true;
      this.rowId = row.id;
      this.diaData.functionName = row.functionName;
      this.diaData.remarks = row.remarks;
      if (row.paramInputClass) {
        this.putType = row.paramInputClass.split(",").map(item => {
          return {
            name: item.split(' ')[0] || '',
            value: item.split(' ')[1] || '',
          }
        });
      }
      if (row.paramOutputClass) {
        this.outType = row.paramOutputClass.split(",").map(item => {
          return {
            name: item.split(' ')[0] || '',
            value: item.split(' ')[1] || '',
          }
        });
      }
    },
    //删除函数
    del(row) {
      this.$confirm("此操作将永久删除选择函数, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        del_deletePFunction({pFunctionId: row.id}).then((res) => {
          let {code, msg} = res.data;
          this.$message.success(msg);
          this.getInfo();
        });
      }).catch(() => {

      });
    },

    //点击弹框内的类型
    cliTag(val, index) {
      if (index == 1) {
        this.putType.push({
          name: val,
          value: ''
        });
      } else {
        if (this.outType.length == 1) {
          this.outType = [{
            name: val,
            value: ''
          }];
        } else {
          this.outType.push({
            name: val,
            value: ''
          });
        }
      }
    },

    //输入弹框点击取消
    noPut() {
      this.closeDia();
    },
    //类型添加确定
    addType() {
      let opt = {
        functionName: this.diaData.functionName,
        remarks: this.diaData.remarks,
        paramInputClass: this.putType.map(item => {
          return item.name + ' ' + item.value
        }).join(","),
        paramOutputClass: this.outType.map(item => {
          return item.name + ' ' + item.value
        }).join(","),
      };
      if (this.TitleFlag == 2) {
        opt.id = this.rowId;
        post_updateFunction(opt).then((res) => {
          let {code, msg} = res.data;
          this.$message.success(msg);
          this.getInfo();
          this.closeDia();
        });
      } else {
        opt.PId = this.listInfo.plugins.id;
        put_funactonAdd(opt).then((res) => {
          let {code, msg} = res.data;
          this.$message.success(msg);
          this.getInfo();
          this.closeDia();
        });
      }
    },
    //参数类型删除
    delType(val, index) {
      if (val == 1) {
        this.putType.splice(index, 1);
      } else {
        this.outType.splice(index, 1);
      }
    },


    //关闭
    closeDia() {
      this.paramType = false;
      this.outType = [];
      this.putType = [];
      this.diaData = {functionName: "", remarks: ""};
    },

    putTypeChange() {

    }
  },
};
</script>

<style lang="less" scoped>
  .edit-comp-body {
    height: 100%;
    width: 100%;
    padding: 15px;
    overflow: auto;
  }

  .libBody {
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      white-space: nowrap;
      margin-right: 15px;
    }
  }

  .bobc {
    margin-top: 10px;
    text-align: center;
  }

  .op {
    cursor: pointer;
    margin: 0 5px;
  }

  .comInfo {
    box-sizing: border-box;
    padding: 10px;

    /deep/ .el-collapse-item__header {
      display: block;
    }

    .basic {
      display: flex;
      align-items: center;

      .dfc {
        margin-right: 30px;
      }
    }

    .fncItem {
      border: 1px solid rgb(111, 110, 110);
      padding: 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
  }

  .comBody {
    // max-height: calc(100% - 400px) !important;
    height: calc(100% - 230px) !important;
    box-sizing: border-box;

    /deep/ .el-collapse {
      max-height: calc(100% - 20px) !important;
    }
  }

  .comInfoItem {
    height: calc(100% - 20px);
    box-sizing: border-box;
  }

  .demo-ruleForm {
    display: flex;
    flex-wrap: wrap;

    .btn {
      width: 100%;
      text-align: center;
      margin-left: -50px;

      .el-button {
        margin-top: 30px;
      }
    }

    .up {
      padding-top: 10px;
    }

    .upload-demo {
      display: flex;
    }
  }

  .iptTile {
    margin: 10px 0;
  }

  .remark {
    margin-top: 10px;
  }

  .tag {
    display: flex;
    flex-wrap: wrap;

    .btnType {
      display: block;
      width: 100px;
      text-align: center;
      border: 1px solid #ffffff;
      line-height: 30px;
      margin-right: 13px;
      margin-bottom: 10px;
      cursor: pointer;
      position: relative;
      color: #ffffff;
      border-radius: 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      .el-icon-circle-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
      }
    }
  }

  .fncName {
    display: flex;
    align-items: center;

    span {
      white-space: nowrap;
      margin-right: 15px;
    }

    .el-input {
      width: 180px;
    }
  }

  .tagContent {
    border: 1px solid #ffffff;
    width: 100%;
    height: 100px;
    margin-top: 10px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;

    .btnType {
      width: calc(33.3333% - 10px);
      text-align: center;
      border: 1px solid #ffffff;
      height: 30px;
      line-height: 30px;
      background-color: rgba(255, 255, 255, 1);
      margin: 5px;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      padding-right: 20px;
      border-radius: 4px;

      .label-text {
        width: 70px;
        flex-shrink: 0;
        height: 100%;
        background-color: #bfbebe;
        border-right: solid 1px rgb(78, 76, 76);
        color: #333;
      }

      .type-input {
        width: 100%;
        height: 100%;
        border: none;
        padding: 0 10px;
        background-color: transparent;
      }

      .el-icon-circle-close {
        position: absolute;
        width: 14px;
        height: 14px;
        right: 5px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        cursor: pointer;
        color: #333;
      }
    }
  }

  .InfoBody {
    width: 100%;
    height: 100%;
    /*background: #fff;*/

    .top {
      width: 100%;
      height: calc(100vh - 140px);
      overflow-y: scroll;
    }
  }
</style>